<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>vue实现留言板</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
	
<h3>留言板（增删改查）</h3>
<div id="app">
	<input v-model="input" type="text">
	<button @click="fill">提交</button>
	<ul>
		<li v-for="(item, key) in list">{{item}}
			<button @click="del(key)">删除</button>
			<button @click="edit(key, item)">编辑</button>
		</li>
	</ul>
</div>

</body>
<script>
const HelloVueApp = {
	data(){
		return{
			input: '',
			list: [],
		}
	},
	methods:{
		fill:function(){
			//尾部添加
			// this.list.push(this.input);
			//头部添加
			this.list.unshift(this.input);
			//清空input框
			this.input = '';
		},
		//删除留言
		del:function(key){
			if(confirm('确定删除吗？')){
				this.list.splice(key,1);
			}
		},
		//编辑留言
		edit:function(key, item){
			var str = prompt("请输入新的内容：", item);
			this.list[key] = str;
		}
	}
}
var vm = Vue.createApp(HelloVueApp).mount('#app');
</script>
</html>